<template>
  <div class="count">
    <h2>得到的值为 {{ myCount }}</h2>
    <!-- <h2>得到的值为 {{ countStore.myCount }}</h2> -->
    <h2>得到的值增加10倍 {{ bigCount }}</h2>
    <select v-model.number="secVal">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <button @click="Add">增加</button> -- <button @click="Sub">减少</button>
  </div>
</template>

<script lang="ts" setup name="Count">
import {useCountStore} from "@/store/Count";
import {ref, toRefs} from 'vue'
import { storeToRefs } from 'pinia'


//let myCount=ref(0)
let secVal = ref(1);
const countStore = useCountStore();
// let storeRef = toRefs(countStore);  //这个会将整个countStore进行转换
// console.log('ref',storeRef)

let { myCount, bigCount, minCount } = storeToRefs(countStore); //只是将countStore中的数据进行转换

function Add() {
  myCount.value += secVal.value;
  //第一种方式对数据进行修改
  //countStore.myCount+=secVal.value

  //第三种方式，调用Store中的Action，或者直接绑定@click
  //countStore.increment(secVal.value);
}

function Sub() {
  myCount.value -= secVal.value;
  //countStore.myCount-=secVal.value
  //第二种方式对数据进行修改
  // countStore.$patch({
  //     myCount:countStore.myCount - secVal.value
  // })
}
</script>

<style>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
select,
button {
  margin: 0 5px;
  height: 25px;
}
</style>
